<div class="topojson-map">
  <header>
    <h2>Life expectancy by Country, <em>{{ currentYear }}</em></h2>
    <input type="range" [value]="currentYear" [min]="min" [max]="max" (input)="setYear($event)">
  </header>

  <vis-single-container [data]="mapData" [height]="550" [duration]="0">
    <vis-topojson-map [topojson]="topojson" [areaColor]="getAreaColor" [disableZoom]="true"></vis-topojson-map>
    <vis-tooltip [triggers]="tooltipTriggers"></vis-tooltip>
  </vis-single-container>

  <vis-xy-container [data]="[{}]" [height]="70" [width]="500">
    <vis-axis type="x" position="top" label="Life expectancy (years)" [numTicks]="numLabels" [tickFormat]="tickFormat"></vis-axis>
    <vis-stacked-bar [x]="0" orientation="horizontal" [y]="gradientSteps" [color]="getGradientColor"></vis-stacked-bar>
  </vis-xy-container>
</div>
